<template>
  <div class="productcom">
    <!-- <div
      class="box"
      v-for="(item, index) in this.$store.state.productlistm.linkdata2"
      :key="index"
    >
      
        <img :src="item.img1" alt="" />
        <p class="desc">{{ item.proname | substr }}</p>
        <p class="prices">¥{{ item.originprice }}</p>
      
    </div> -->
    <van-list
      class="detail-box"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      offset="100"
      @load="onLoad"
    >
      <div class="img-box">
        <ul class="left-box">
          <template
            v-for="(item, index) in this.$store.state.productlistm.linkdata2"
          >
            <li v-if="index % 2 == 0" :key="index" @click="goGoodsDetail(item.proid)">
              <img :src="item.img1" />
              <p class="desc">{{ item.proname  }}</p>
              <p class="prices">¥{{ item.originprice }}</p>
            </li>
          </template>
        </ul>
        <ul class="right-box">
          <template
            v-for="(item, index) in this.$store.state.productlistm.linkdata2" 
          >
            <li v-if="index % 2 != 0" :key="index" @click="goGoodsDetail(item.proid)">
              <img :src="item.img1" />
              <p class="desc">{{ item.proname }}</p>
              <p class="prices">¥{{ item.originprice }}</p>
            </li>
          </template>
        </ul>
      </div>
    </van-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      finished: false,
      count:1
    };
  },
  methods: {
    onLoad() { 
     
      let count=this.count
      this.$store.dispatch("LINK_DATA_LIST", count)
      this.count++
      this.loading=false
    },
    goGoodsDetail(proid){
      this.$router.push({
          name:'detailview',
          params:{
              proid:proid
          }
      })
    }
  },
  created(){},
};
</script>

<style lang="scss" scoped>
// .productcom {
//   margin: 0.5556rem;
//   box-sizing: border-box;
//   display: flex;
//   justify-content: space-between;
//   flex-wrap: wrap;
// }
// .box {
//   border-radius: 0.5556rem;
//   // height:17.2222rem;
//   width: 48%;
//   background-color: #fff;
//   box-sizing: border-box;
//   padding: 0 0.1667rem;
//   margin-top: 0.5556rem;

// }

// .box div:nth-child(1) {
//   width: 100%;
//   img {
//     width: 100%;
//     border-radius: 0.5556rem;
//     display: block;
//   }
// }
.desc {
  font-size: 0.7778rem;
  margin-top: 0.5556rem;
  padding: 0 0.2778rem;
   display: -webkit-box;/*作为弹性伸缩盒子模型显示*/
    -webkit-line-clamp: 2; /*显示的行数；如果要设置2行加...则设置为2*/
    overflow: hidden; /*超出的文本隐藏*/
    text-overflow: ellipsis; /* 溢出用省略号*/
    -webkit-box-orient: vertical;/*伸缩盒子的子元素排列：从上到下*/


}
.prices {
  color: rgb(255, 103, 103);
  font-size: 1.1111rem;
  margin-top: 0.8333rem;
  padding: 0.1667rem 0.2778rem;
}
.img-box {
  display: flex;
  padding: 0 0.1667rem;
}
li {
  margin-bottom: 0.5556rem;
  border-radius: 0.8333rem;
}
.left-box,
.right-box {
  width: 50%;
  border-radius: 0.5556rem;
  padding: 0 0.2778rem;
}
li {
  background-color: #fff;
}
img {
  width: 100%;
  height: 100%;
  border-radius: 0.5556rem 0.5556rem 0 0;
}
</style>